<template>
  <component :is="header"/>
  <div class="main">
    <div class="w">
      <el-row>
        <el-col :span="6">
          <el-carousel height="65vh" indicator-position="none" :interval="3000" arrow="never">
            <el-carousel-item>
              <img src="/img/login/左侧登录图1.jpg" style="height: 65vh" alt=""/>
            </el-carousel-item>
            <el-carousel-item>
              <img src="/img/login/左侧登录图2.jpg" style="height: 65vh" alt=""/>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="18">
          <el-card class="box">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-form :model="form" :rules="rules"
                         label-position="left" ref="registerFormRef" label-width="auto">
                  <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="form.nickname"></el-input>
                  </el-form-item>
                  <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker type="date" placeholder="Pick a date" v-model="form.birthday"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                      <el-radio label="1">男</el-radio>
                      <el-radio label="2">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="再次确认" prop="checkPass">
                    <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="registered">注册</el-button>
                    <el-button @click="resetForm">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
                <el-button link @click="login"
                           style="float: right;margin-top: 10px;"
                           type="primary">立即登录
                </el-button>
                <span style="font-size: 14px;float: right;margin-top: 10px;">已有账号？</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <component :is="loginFooter"/>
</template>

<script setup>
import {reactive, ref} from 'vue';
import header from "@/views/base/HeaderView.vue";
import loginFooter from "@/views/base/LoginFooterView.vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const form = reactive({
  nickname: '',
  birthday: '',
  gender: '',
  phone: '',
  email: '',
  password: '',
  checkPass: ''
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (form.checkPass !== '') {
      registerFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.password) {
    callback(new Error("两次密码不相同!"))
  } else {
    callback()
  }
}

const rules = reactive({
  nickname: [{required: true, message: '请输入昵称', trigger: 'blur'}],
  birthday: [{type: 'date', required: true, message: '请选择一个日期', trigger: 'change'}],
  gender: [{required: true, message: '请选择性别', trigger: 'change'}],
  phone: [{required: true, pattern: /^[0-9]*$/, message: '请输入正确的电话', trigger: 'blur'}],
  email: [{required: true, type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}],
  password: [{required: true, validator: validatePass, trigger: 'blur'}],
  checkPass: [{required: true, validator: validatePass2, trigger: 'blur'}]
})

const registerFormRef = ref(null)

const registered = () => {
  if(form.nickname === '' || form.nickname === null){
    Info('请输入昵称')
    return;
  }
  if(form.birthday === '' || form.birthday === null){
    Info('请选择出生日期')
    return;
  }
  if(form.gender === '' || form.gender === null){
    Info('请选择性别')
    return;
  }
  if(form.phone === '' || form.phone === null){
    Info('请输入电话')
    return;
  }
  if(form.email === '' || form.email === null){
    Info('请输入邮箱')
    return;
  }
  if(form.password === '' || form.password === null){
    Info('请输入密码')
    return;
  }
  if(form.checkPass === '' || form.checkPass === null){
    Info('请再次输入确认密码')
    return;
  }
  let data = qs.stringify(form)
  axios.post(BASE_URL + '/v1/user/register' , data).then(response => {
        if (response.data.code === 2000) {
          OKInfo('注册成功!')
          registerFormRef.value.resetFields();
          router.push('/login')
        } else {
          ElMessage.error(response.data.msg)
        }
      })
}

const resetForm = () => {
  if (registerFormRef.value) {
    registerFormRef.value.resetFields()
  }
}
const login = () => {
  router.push('/login')
}
</script>

<style scoped>
.main {
  height: 65vh;
  width: 100%;
  background-color: #192231;
}

.box {
  height: 65vh;
  padding: 40px;
  box-sizing: border-box;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 40px;
}
</style>